<template>
  <span class="mpd-icon" :class="iconClass" :style="styleAttr"></span>
</template>

<script>
export default {
  name: 'MpdIcon',
  props: {
    // 图标类型,查看iconfont.css、font-awesome
    icon: {
      type: String,
      default() {
        return 'mpd-icon-question'
      }
    },
    fontSize: {
      type: Number
    }
  },
  computed: {
    iconClass() {
      const arr = []
      if (this.icon.startsWith('mpd-')) {
        arr.push('mpd-iconfont')
      } else if (this.icon.startsWith('fa-')) {
        arr.push('fa')
      }
      arr.push(this.icon)
      return arr
    },
    styleAttr() {
      const style = {}
      if (this.fontSize) {
        style.fontSize = this.fontSize + 'px'
      }
      return style
    }
  }
}
</script>

<style lang="less">
.mpd-icon {
  line-height: normal;
}
</style>
